<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹鹏孝
 * @Date: 2021-12-30 16:36:05
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2021-12-30 16:48:54
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>w3c虚拟键盘测试</title>
    <style>
        @media (spanning: single-fold-vertical) {
            body {
                display: grid;
                margin: 0;
                height: 100vh;
                grid-template-columns: env(fold-left) calc(100vw - env(fold-right));
                grid-column-gap: calc(env(fold-right) - env(fold-left));
            }

            .map {
                grid-column: 1;
                grid-row: 1;
            }

            .search-box {
                /* overlay into same grid column as the map */
                grid-column: 1;
                grid-row: 1;

                /* position the search box at the bottom of the cell, centered */
                align-self: end;

                /* margin when keyboard not showing on left screen */
                margin: 20px;

                /* give it a little style */
                padding: 10px;
                font-size: 24px;
                border: 4px solid black;
                border-radius: 4px;
                background-color: #86DBF6;
            }

            .locations-list {
                grid-column: 2;
                grid-row: 1;
            }

            @media (env(keyboard-inset-right) <=env(fold-left)) {

                /* keyboard is on the left screen, adjust search box */
                .search-box {
                    margin-bottom: calc(20px + env(keyboard-inset-height));
                }
            }
        }
    </style>
</head>

<body>


    <div class="map">...</div>
    <input class="search-box" type="search" placeholder="search...">
    <div class="locations-list">...</div>
    <script type="module">
        navigator.virtualKeyboard.overlaysContent = true
    </script>
</body>

</html>